<template>
  <view>
    <navbar></navbar>
    <view class="container b-f p-b">
      <view class="article-title">
        <text class="f-32">{{ detail.article_title }}</text>
      </view>
      <view class="article-little dis-flex flex-x-between m-top10">
       <!-- <view class="article-little__left">
          <text class="article-views f-24 col-8">{{ detail.show_views }}次浏览</text>
        </view> -->
        <view class="article-little__right">
          <text class="article-views f-26 col-8">{{ detail.view_time }}</text>
        </view>
		
      </view>
	  <!-- <view class="hr">
	  	
	  </view> -->
      <view class="article-content m-top20">
        <mp-html :content="article_content"></mp-html>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp(); // 富文本插件
import navbar from "@/components/navbar/navbar";
export default {
  components: {
    navbar
  },
    data() {
        return {
            // 文章详情
            detail: {
                article_title: '',
                show_views: '',
                view_time: ''
            },

            article_content: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        // 获取文章详情
        this.getArticleDetail(options.article_id);
    },
    /**
     * 分享当前页面
     */
    onShareAppMessage() {
        // 构建页面参数
        let params = app.getShareUrlParams({
            article_id: this.detail.article_id
        });
        return {
            title: this.detail.article_title,
            path: '/pages/article/detail/index?' + params,
			imageUrl: '@/static/logo.png', //分享图标
			desc: this.detail.article_title //自定义分享描述
        };
    },
    methods: {
        /**
         * 获取文章详情
         */
        getArticleDetail(article_id) {
            let _this = this;

            app._get(
                'article/detail',
                {
                    article_id
                },
                function (result) {
                    let detail = result.data.detail; // 富文本转码

                    if (detail.article_content.length > 0) {
                        _this.article_content = _this.escape2Html(detail.article_content);
                    }
					uni.setNavigationBarTitle({
						title: detail.article_title + ' - king数艺'
					})
					
                    _this.setData({
                        detail
                    });
                }
            );
        }
    }
};
</script>
<style>
  page {
      background: #fff !important;
  }
</style>
<style lang="scss" scoped>
.container {
    padding: 20rpx;
	margin-top: 40rpx;
}
.article-title{
	line-height:1.5;
	margin-top:10rpx;
	font-weight: bold;
}
.article-content {
    font-size: 28rpx;
}
.hr{
	margin-top: 20rpx;
	width: 100%;
	background: #cbcbcb;
	height: 1rpx;
}
</style>
